<template>
    <div class="RTF" ref="RTF">
        <div class="edit_container">
            <dragImgUpload @onChange="uploaderFileChange($event)">
                <quill-editor 
                    v-model="content" 
                    ref="quill" 
                    :options="options" 
                    @blur="onEditorBlur($event)" 
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)"
                    >
                </quill-editor>
            </dragImgUpload>

            <input
              type="file"
              name="file"
              style="position: absolute;top:3px;left:3px;width:26px;height:26px;opacity:0;cursor: pointer;font-size:0;"
              class="fileImg"
              ref="quillImgInput"
              value
              accept="image/jpeg, image/png, image/jpg, image/gif"
              multiple
              @change="onRead"
            >
        </div>
    </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import dragImgUpload from "./com/dragImgUpload.vue"; //上传

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)

export default {
    components: {
        quillEditor,
        dragImgUpload
    },
    props: {
        height: {
            type: Number,
            required: false
        }
    },
    watch:{
        "content"(){
            this.$emit("change",this.content)
        }
    },
    data() {
        return {
            content: ``,
            options: {
                theme: 'snow',            
                modules: {
                    toolbar: [
                        [],
                            ['bold', 'italic','underline', 'strike'],
                            ['blockquote', 'code-block'],
                           
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            [{'script': 'sub'}, {'script': 'super'}],
                            [{'indent': '-1'}, {'indent': '+1'}],
                            [{'direction': 'rtl'}],
                           
                            [{'header': [1, 2, 3, 4, 5, 6, false]}],
                            [{'color': []}, {'background': []}],
                            [{'font': []}],
                            [{'align': []}],
                            ['clean'],
                            [ 'image']
                        ],
                    history: {
                        delay: 1000,
                        maxStack: 50,
                        userOnly: false
                    },
                    imageResize: {}
                },
            }    
        }
    },
    methods: {
        // 抛出图片上传事件
        uploaderFileChange(e){
            this.$emit("uploaderFileChange",e.files[0])
        },
        onRead(input){
            let img = input.target.files

            if(img.length == 0){
                return
            }
			for(let i = 0;i < img.length;i ++){
                this.$emit("uploaderFileChange",img[i])
			}

			// 清空
			input.srcElement.value = ""	
        },
        // 添加图片2
        addImg(url){
            let quill = this.$refs.quill.quill
            let index = (quill.getSelection() || {}).index || 0
            // 添加一个图片
            quill.insertEmbed(index, "image", url);
            // 修改光标位置
            quill.setSelection(index + 1)
        },
        onEditorReady(editor) { // 准备编辑器
           
        },
        onEditorBlur(){
           
        }, // 失去焦点事件
        onEditorFocus(){
            
        }, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
    },
    mounted() {
        var vm =this
        var imgHandler = async function(state) {
            if (state) {
                let fileInput = vm.$refs.quillImgInput
                fileInput.click() // 加一个触发事件
            }
        }
        this.$refs.quill.quill.getModule("toolbar").addHandler("image", imgHandler)

        this.$nextTick(function () {
            if(this.height){
                let rtf = this.$refs.RTF

                let dom = rtf.getElementsByClassName("ql-editor")[0]
                dom.style.height = this.height + "px"
            }
        })
    }
}
</script>
<style lang="scss" scoped>
.test{
    background: #fff;
    
}
</style>
